<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<meta http-equiv="X-UA-Compatible" content="IE=8"/>
	<title>Buscar Itinerario</title>
	<link href="./../css/styles.css" rel="stylesheet" type="text/css"/> 
	<script src="./js/validacionesBuscarItinerario.js" type="text/javascript"></script>
</h:head>
<h:body>
	
	<h:form id="frmItinerario" >
	
	<center>
		<p:panel id="pnlBody" header="PASO 1: Buscar Itinerario" style="width: 950px !important;">
            
            <table width="950px" class="cssFiltroItinerario">
				<tr>
					<td width="120px">
						<h:outputText value="Ciudad Origen"></h:outputText>
					</td>
					<td>
						<h:selectOneMenu  id="cboCiudadOrigen" value="#{itinerario.origen}" onchange="submit()"
										valueChangeListener="#{itinerario.cambiaOrigen}">
					   		<f:selectItems value="#{itinerario.lstCiudades}" var="obj"
			                       itemLabel="#{obj.nombre}" itemValue="#{obj.id}"></f:selectItems>
			            </h:selectOneMenu>
					</td>
				</tr>
				<tr>
					<td>
						<h:outputText value="Ciudad Destino"></h:outputText>
					</td>
					<td>
						<h:selectOneMenu  id="cboCiudadDestino" value="#{itinerario.destino}">
					   		<f:selectItems value="#{itinerario.lstCiudadesDestino}" var="obj"
			                       itemLabel="#{obj.nombre}" itemValue="#{obj.id}"></f:selectItems>
			            </h:selectOneMenu>
					</td>
				</tr>
				<tr>
					<td>
						<h:outputText value="Tipo Viaje"></h:outputText>
					</td>
					<td>
						<h:selectOneMenu  id="cboTipoViaje" value="#{itinerario.tipoViaje}">
					   		<f:selectItem itemValue="-1" itemLabel="[SELECCIONAR]"></f:selectItem>
					   		<f:selectItem itemValue="1" itemLabel="Ida y Retorno"></f:selectItem>
					   		<f:selectItem itemValue="2" itemLabel="Solo Ida"></f:selectItem>
			            </h:selectOneMenu>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<table width="100%" class="cssFiltroItinerario" border="0">
							<tr>
								<td width="120px">
									<h:outputText value="Fecha Salida"></h:outputText>
								</td>
								<td>
									<p:calendar id="txtFecSalida" value="#{itinerario.fecSalida}" mode="popup" pattern="dd/MM/yyyy"></p:calendar>
								</td>
								<td width="120px">
									<h:outputText value="Fecha Retorno"></h:outputText>
								</td>
								<td>
									<p:calendar id="txtFecRetorno" value="#{itinerario.fecRetorno}" mode="popup" pattern="dd/MM/yyyy"></p:calendar>
								</td>
							</tr>
						</table>
					</td>
				</tr>
				<tr>
					<td colspan="2" style="text-align: right !important;">
						<p:commandButton id="btnBuscar" value="Buscar Itinerarios" 
									action="#{itinerario.buscarItinerarios}" 
									icon="ui-icon-check" update="pnlSalida,pnlRetorno" />
					</td>
				</tr>
				
				<tr>
					<td colspan="2">
						<table >
							<tr>
								<td valign="top">
									<p:panel id="pnlSalida" header="Horarios Salida" style="width: 425px;">
										
										<h:dataTable value="#{itinerario.lstItinerarioSalida}" 
								    		var="obj" rowClasses="#{itinerario.colorFilas}"
								    		
										   headerClass="tableHeadRow">
										   <h:column headerClass="col1" >    				
										      <f:facet name="header">Ciudad Origen</f:facet>    				
										      #{obj.ciudadOrigen}
										   </h:column>
										   <h:column headerClass="col2">
										      <f:facet name="header">Ciudad Destino</f:facet>
										      #{obj.ciudadDestino}
										   </h:column>
										   <h:column headerClass="col3">
										      <f:facet name="header">Hora Salida</f:facet>
										      #{obj.horaSalida}
										   </h:column>
										   <h:column headerClass="col3">
										      <f:facet name="header">Cant. Pasajeros</f:facet>
										      #{obj.cantPasajeros}
										   </h:column>
										   <h:column headerClass="col3">
										      <f:facet name="header">Duracion Horas</f:facet>
										      #{obj.duracionHoras}
										   </h:column>
										   <h:column headerClass="col4">
										      <f:facet name="header">Opcion</f:facet>
										      <h:commandLink action="#{itinerario.elegir(obj.id)}">
										      	Elegir
									      		</h:commandLink>
										   </h:column>
										</h:dataTable>
										
										<h:outputText value="No se encontraron registros" rendered="#{empty itinerario.lstItinerarioSalida}" />
								
									</p:panel>
								</td>
								<td valign="top">
									<p:panel id="pnlRetorno" header="Horarios Retorno" style="width: 425px;">
										
										<h:dataTable value="#{itinerario.lstItinerarioRetorno}" 
								    		var="obj" rowClasses="#{itinerario.colorFilas}"
										   headerClass="tableHeadRow">
										   <h:column headerClass="col1" >    				
										      <f:facet name="header">Ciudad Origen</f:facet>    				
										      #{obj.ciudadOrigen}
										   </h:column>
										   <h:column headerClass="col2">
										      <f:facet name="header">Ciudad Destino</f:facet>
										      #{obj.ciudadDestino}
										   </h:column>
										   <h:column headerClass="col3">
										      <f:facet name="header">Hora Salida</f:facet>
										      #{obj.horaSalida}
										   </h:column>
										   <h:column headerClass="col3">
										      <f:facet name="header">Cant. Pasajeros</f:facet>
										      #{obj.cantPasajeros}
										   </h:column>
										   <h:column headerClass="col3">
										      <f:facet name="header">Duracion Horas</f:facet>
										      #{obj.duracionHoras}
										   </h:column>
										   <h:column headerClass="col4">
										      <f:facet name="header">Opcion</f:facet>
										      <h:commandLink action="#{itinerario.elegir(obj.id)}">
										      	Elegir
									      		</h:commandLink>
										   </h:column>
										</h:dataTable>
										
										<h:outputText value="No se encontraron registros" rendered="#{empty itinerario.lstItinerarioRetorno}" />
									
									</p:panel>
								</td>
							</tr>
						</table>
					</td>
				</tr>
				
				<tr>
					<td colspan="2" style="text-align: right !important;">
						<p:commandButton id="btnElegirAsiento" value="Elegir Asiento" 
									action="#{itinerario.elegirAsiento}" ajax="false"></p:commandButton>
					</td>
				</tr>
			</table>
            
              
        </p:panel>
	</center>
	
	</h:form>

</h:body>

</html>